<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="a in list">{{a}}</li>
        </ul>
        <button v-on:click="xg1">修改元素</button>
        <button v-on:click="xg2">修改长度</button>

        <ul>
            <!-- 第一个元素是a -->
             <!-- v-for (value,index) in arr -->
              <li v-for="(index,a) in list">第{{index}}个元素是{{a}}</li>
        </ul>

        <div v-for="data in json">
            <span>第{{data.id}}个 名字是：{{data.name}}</span>
            <p>年龄是：{{data.age}}</p>
        </div>

        <ul>
            <!-- 值，标签，索引 -->
            <li v-for="(value,key,index) in user">{{value}}---{{index}}--{{key}}</li>
        </ul>

        <p v-for="a in 10">第{{a}}个奇数是{{a*2-1}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                list:['a','b','c','d'],
                json:[{id:1,name:"aaa",age:18},{id:4,name:"bbb",age:19},{id:2,name:"ccc",age:20},{id:3,name:"ddd",age:21}],
                user:{
                    name:"aa",
                    age:"18",
                    sex:"女"
                }
            },
            methods: {
                xg1(){
                    // 不能自动更新到视图
                    // 直接通过索引去修改数组元素
                    console.log('1');                   
                    // this.list[0]="qq"
                    this.$set(this.list,1,"qq")
                },
                xg2(){
                    // 修改数组长度，这类修改属性值的方法
                    console.log('2');
                    
                    // this.list.length="2"
                    this.list.splice(2)
                }

            }
        })
    </script>
</body>

</html>